<html>
  <head>
    <title>WebSocketServer</title>
    <script type="text/javascript">
    var ws;
	function log(msg, color)
    {
      var div = document.getElementById("output");
      div.innerHTML = div.innerHTML + "<pre style='color:" + color + "'>" + msg + "</pre>";
    }
	  
    function WebSocketOpen()
    {
      if ("WebSocket" in window) 
      {
        ws = new WebSocket("ws://localhost:9980/ws");

        ws.onopen = function()
        {
          ws.send("Hello, world!");
		  log("WebSocket opened.", "green");
        };
    
        ws.onmessage = function(evt)
        {
          var arr = evt.data.split(",");
          if (arr.length >= 4)
          {
		    log("Data: " + evt.data, "green");
            updateTable(arr[0], arr[1], arr[2], arr[3]);
          }
          else
            log("Unknown message received: " + evt.data, "red");
        };
        
        ws.onclose = function()
        {
          log("WebSocket closed.", "red");
        }
      }
      else
      {
        log("This browser does not support WebSockets.", "red");
      }
    }
    
    function WebSocketSend(msg)
    {
      ws.send("hello");
    }
    
    function WebSocketClose()
    {
      ws.close();
    }
    
    function updateTable(id, name, address, age)
    {
      var table = document.getElementById("dataTable");
      
      
      if (table.rows.length > 1)
      {
        for (r = 1; r < table.rows.length; r++)
        {
          if (table.rows[r].cells[0].innerHTML == id)
          {
            table.rows[r].cells[1].innerHTML = name;
            table.rows[r].cells[2].innerHTML = address;
            table.rows[r].cells[3].innerHTML = age;
            return;
          }
        }
      }
      
      var row = table.insertRow(table.rows.length);
      
      var cell1 = row.insertCell(0);
      cell1.innerHTML = id;
      
      var cell2 = row.insertCell(1);
      cell2.innerHTML = name;
      
      var cell3 = row.insertCell(2);
      cell3.innerHTML = address;
      
      var cell4 = row.insertCell(3);
      cell4.innerHTML = age;
    }
    </script>
  </head>
  <body onload="WebSocketOpen()">
    <h1>Web Notifier Example</h1>
    <!--
    <p><a href="javascript:WebSocketOpen()">Open WebSocket</a></p>
    <p><a href="javascript:WebSocketClose()">Close WebSocket</a></p>
    <p><a href="javascript:WebSocketSend('hello')">Send Echo</a></p>
    -->
    <table id="dataTable" width="350px" border="1">
      <tr>  <th>ID</th> <th>Name</th>  <th>Address</th>  <th>Age</th></tr>
    </table>
    <div id="output"></div>
  </body>
</html>